<template>
    <div>
        <h4>基本信息</h4>
        <el-form :inline="true" class="demo-form-inline">
  <el-form-item label="用户昵称">
    <el-input v-model="nickName" disabled></el-input>
  </el-form-item>
  <el-form-item label="登录账号">
    <el-input v-model="userName" disabled></el-input>
  </el-form-item>
</el-form>
<h4>角色信息</h4>
<el-table @selection-change="handleSelectionChange" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"  ref="multipleTable" style="width: 100%">
    <el-table-column
      type="index"
      width="48" label="序号" align="center">
    </el-table-column>
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column prop="roleId" label="角色编号" align="center">
                </el-table-column>
                <el-table-column prop="roleName" label="角色名称" align="center">
                </el-table-column>
                <el-table-column prop="roleKey" label="权限字符" align="center">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center">
                    <template #default="{ row }">
                        {{ row.createTime | dateFormat }}
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination :page-size="pageSize"  :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 50]" background
                     layout="total, sizes, prev, pager, next, jumper" :total="total"
                     @size-change="handleSizeChange"  @current-change="handleCurrentChange" />
            </div>
            <div class="btn">
        <el-button type="primary" @click="submitFn">提交</el-button>
        <el-button @click="toggleSelection(flag)">取消</el-button>
      </div>
    </div>
</template>

<script>
import {getAuthRoleAPI,authRoleAPI} from "@/API/hbaip/api";
export default {
    data(){
        return{
            tableData:[],
            pageNum:1,
            currentPage:1,
            pageSize:10,
            total:0,
            nickName:'',
            userName:'',
            roleIds:0,
            flag:[]
        }
    },
 async created(){
    let res = await getAuthRoleAPI(this.$route.query.id)
    this.tableData=res.roles
    this.total=res.roles.length
    this.nickName=res.user.nickName
    this.userName=res.user.userName
    this.flag=res.roles.filter((item)=>item.flag==true)
    // this.$nextTick(()=>{
    //      this.toggleSelection(this.flag)
    // })
 },
 updated(){
    this.toggleSelection(this.flag)
 },
 methods:{
    toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            console.log(this.$refs);
            this.$refs.multipleTable.toggleRowSelection(row);
            console.log(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
        handleCurrentChange(val) {
           this.pageNum=val
        },
        handleSizeChange(val){
          this.pageSize=val
        },
        handleSelectionChange(val){
            this.roleIds = val.map((item)=>item.roleId)
        },
        // 提交修改
        async submitFn(){
            let res =  authRoleAPI(this.$route.query.id,this.roleIds)
            if(res.code==200){
                setTimeout(()=>{
                this.$router.push('/user')
                },1000)
            }
            
        }
 }
}
</script>

<style lang="less" scoped>
h4{
    font-size: 15px;
    color: #6379bb;
    border-bottom: 1px solid #ddd;
    margin: 8px 10px 25px 10px;
    padding-bottom: 5px;
}
.demo-form-inline{
text-align: center;
}
/deep/ .el-table .el-table__header-wrapper th {
            background-color: #f8f8f9;
            color: #515a6e;
            height: 40px;
            font-size: 13px;
        }
        .page {
            padding: 20px;
            display: flex;
            justify-content: flex-end;
        }
        .btn{
            text-align: center;
            margin-top: 20px;
        }
</style>